<template>
	<view class="container">
		 <cu-custom style="background-color: #fff;border-bottom: solid #F5F6F7 1px;" bgColor="bg-white" :isBack="true">
		 	<block slot="content">项目进度汇总</block>
		 	<!-- <view slot="right"  @tap=""><image src="../../static/icon/shaixuan.png" style="width: 15px;height: 17px;"></image> </view> -->
		 </cu-custom>
		  <view class="swiperMain">
			  <view class="swiperHead">
				  <view class="swiperItem" :class="{swpHeadActiv:currentTabIndex===index}" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" @click="CurrentTab(index)">
					<text class="swipText"> {{tab.name}}</text> <text class="swiperLine"></text>
				  </view>
			  </view>
			  <view class="cutLine"></view>
			  <view class="ordinary_tr_22" >单位（亿元）</view>
			  <view class="contentList" v-if="tabIndex==0">
				  <view class="view_table">
					  <!-- <view class="ordinary_tr" v-for="(tableItem,index) in tableData" :key="index"> -->
					 
					  <view class="ordinary_tr title_tr">
						  <view class="view_td" v-for="(titleItem,index) in titleText">{{titleItem}}</view>
						 
					  </view>
				
					  <view class="ordinary_tr" v-for="(item,index) in shizhouArr">
						  <view class="view_td">{{item.category}}</view>
						  <view class="view_td">{{item.xmNum}}</view>
						  <view class="view_td">{{item.yearLjwcTotalMoney}}</view>
						  <view class="view_td">{{item.yearLjwcTotalMoneyRate}}</view>
					  </view>
				
				  </view>
			  </view>
				<view class="contentList" v-if="tabIndex==1">
								  <view class="view_table">
									  <!-- <view class="ordinary_tr" v-for="(tableItem,index) in tableData" :key="index"> -->
									  <view class="ordinary_tr title_tr">
										  <view class="view_td" v-for="(titleItem,index) in titleText1">{{titleItem}}</view>
										 
									  </view>
									 <view class="ordinary_tr" v-for="(item,index) in hangyeArr">
									 						  <view class="view_td_left">{{item.category}}</view>
									 						  <view class="view_td">{{item.xmNum}}</view>
									 						  <view class="view_td">{{item.yearLjwcTotalMoney}}</view>
									 						  <view class="view_td">{{item.yearLjwcTotalMoneyRate}}</view>
									 </view>
								  </view>
				</view>
				
				<view class="contentList" v-if="tabIndex==2">
								  <view class="view_table">
									  <!-- <view class="ordinary_tr" v-for="(tableItem,index) in tableData" :key="index"> -->
									  <view class="ordinary_tr title_tr">
										  <view class="view_td" v-for="(titleItem,index) in titleText2">{{titleItem}}</view>
										 
									  </view>
									  <view class="ordinary_tr" v-for="(item,index) in jsjdArr">
									  						  <view class="view_td">{{item.category}}</view>
									  						  <view class="view_td">{{item.xmNum}}</view>
									  						  <view class="view_td">{{item.yearLjwcTotalMoney}}</view>
									  						  <view class="view_td">{{item.yearLjwcTotalMoneyRate}}</view>
									  </view>
								
								  </view>
				</view>
				
				<!-- <view class="contentList" v-if="tabIndex==3">
								  <view class="view_table">
									  <view class="ordinary_tr title_tr">
										  <view class="view_td" v-for="(titleItem,index) in titleText3">{{titleItem}}</view>
										 
									  </view>
									  <view class="ordinary_tr">
										  <view class="view_td">省直</view>
										  <view class="view_td">123</view>
										  <view class="view_td">234</view>
										  <view class="view_td">5</view>
									  </view>
								
								  </view>
				</view>
				 -->
			</view>
		</view>
</template>

<script>
	export default{
		data(){
			return{
				tabList: [{
				  id: "tab01",
				  name: '按市州汇总',
				  statistical: '1'
				}, {
				  id: "tab02",
				  name: '按行业汇总',
				  statistical: '2'
				}, {
				  id: "tab03",
				  name: '建设阶段汇总',
				  statistical: '3'
				}/* , {
				  id: "tab04",
				  name: '阶段汇总',
				  statistical: '4'
				} */],
				tableData:[
					{area:"省直",plan:"123",already:"456",warning:"3"}
				],
				titleText:["市州","项目数","本年完成投资","完成率%"],				
				titleText1:["行业","项目数","本年完成投资","完成率%"],
				titleText2:["类别","项目数","本年完成投资","完成率%"],
				//titleText3:["市州","计划竣工数","已竣工数","竣工预警数"],
				tabIndex: 0,
				currentTabIndex:0,
				shizhouArr:[],
				hangyeArr:[],
				jsjdArr:[],
			}
		},
		onLoad() {
			this.$http.get("/project/v1/queryXmjdtjListSz.do",{
				params:""
			}).then(res=>{
				console.log(res);
				this.shizhouArr = res.data.rows;
				this.shizhouArr = this.shizhouArr.map((item)=>{
					return{
						category:item.category,
						xmNum:item.xmNum,
						yearLjwcTotalMoney:item.yearLjwcTotalMoney,
						yearLjwcTotalMoneyRate:item.yearLjwcTotalMoneyRate
					}
				})
			})
		},
		methods:{
			CurrentTab(index){
				this.currentTabIndex = index;
				this.tabIndex = index;
				if(this.tabIndex==1){
					this.hangye()
				}else if(this.tabIndex==2){
					//this.kaigong()
					this.jieduan()
				}/* else if(this.tabIndex==3){
					this.jieduan()
				} */
			},
			hangye(){
				this.$http.get("/project/v1/queryXmjdtjListSshy.do",{
					
				}).then(res=>{
					console.log(res);
					this.hangyeArr = res.data.rows;
					this.hangyeArr = this.hangyeArr.map((item)=>{
						return{
							category:item.category,
							xmNum:item.xmNum,
							yearLjwcTotalMoney:item.yearLjwcTotalMoney,
							yearLjwcTotalMoneyRate:item.yearLjwcTotalMoneyRate
						}
					})
				})
			},
			kaigong(){
				this.$http.get("/project/v1/queryXmjdtjListKgJg.do",{
					
				}).then(res=>{
					console.log(res);
				})
			},
			jieduan(){
				this.$http.get("/project/v1/queryXmjdtjListJsjd.do",{
					
				}).then(res=>{
					
					this.jsjdArr = res.data.rows;
					this.jsjdArr = this.jsjdArr.map((item)=>{
						return{
							category:item.category,
							xmNum:item.xmNum,
							yearLjwcTotalMoney:item.yearLjwcTotalMoney,
							yearLjwcTotalMoneyRate:item.yearLjwcTotalMoneyRate
						}
					})
				})
			}
		}
	}
</script>

<style>
	@import "uni.css";
	page {
	    width: 100%;
	    display: flex;
		font-family: "my-font";
	  }
	  .tab-box{
		  width: 100%;
		  height: 1500px;
	  }
	.swiperHead{
		width: 100%;
		height: 44px;
		display: flex;
		line-height: 44px;
	}
	.container{
		width: 100%;
	}
	.swiperItem{
		width: 33%;
		text-align: center;
		font-size: 36rpx;
		position: relative;
		color: #B7B7B7;
	}
	  page {
	    width: 100%;
	    min-height: 100%;
	    display: flex;
	  }
	  .swpHeadActiv .swipText{
		  color: #2A2A2A;
	  }
	.swiperLine{
		width: 26px;
		height: 4px;
		border-radius: 25px;
		background-color: #27A9FF;
		position: absolute;
		bottom: 0;
		left: 45px;
		display: none;
	}
	.swpHeadActiv .swiperLine{
		display: block;
	}
	.cutLine{
		width: 100%;
		height: 10px;
		background-color: #F5F6F7;
	}
	.contentList{
		width: 100%;
		background-color: #fff;
		padding: 0px;
		box-sizing: border-box;
	}
	.view_table{
		width: 100%;
		height: 600px;
		border: solid #EFF0F3 1px;
	}
	.title_tr{		
		background-color: #FBFCFC;
	}
	.ordinary_tr{
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		border-bottom: solid #EFF0F3 1px;
	}
	.ordinary_tr_22{
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		text-align: right;
		padding-left: 20px;
		/* border-bottom: solid #EFF0F3 1px; */
	}
	.view_td{
		width: 25%;
		height: 40px;
		color: #2A2A2A;
		font-size: 14px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.view_td_left{
		width: 25%;
		height: 40px;
		color: #2A2A2A;
		font-size: 14px;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
</style>

